<script>
    $(function() {        
        $('#dialog-form').dialog({
            autoOpen: false,
            modal: true,
            draggable: false,
            close: clear,
            buttons: {
                'Aceptar': function() {                    
                    var product_id = $('#FacturasProductoProductoId').val();
                    var product_name = $('#FacturasProductoProductoId option:selected').text();
                    var precio = $('#FacturasProductoPrecio').val();
                    var cantidad = $('#FacturasProductoCantidad').val();
                    var subtotal = precio * cantidad;
                    var total = parseInt($('#total_visible').val()) + subtotal;
                    
                    var html = '<tr> \n\
                                    <td id="'+product_id+'">' + product_id + '</td> \n\
                                    <td>' + product_name  +'</td>\n\
                                    <td id="'+precio+'">' + precio +'</td> \n\
                                    <td id="'+cantidad+'">' + cantidad + '</td> \n\
                                    <td>' + subtotal + '</td> \n\
                                </tr>';
                    
                    $(html).insertAfter($('#tabla_detalle_factura tr:last')).hide().fadeIn();
                    $('#total_visible').val(total);
                    $(this).dialog('close');                 
                }
            }
        });
        
        $('#agregar').click(function() {
            $('#dialog-form').dialog('open');
        });
        
        $('#guardarFactura').click(function() {
            var total = $('#total_visible').val();
            $('#total').val(total);
            
            $.ajax({
                type: 'POST',
                url: 'add',
                data: $('#formFactura').serialize(),
                success: function() {
                    guardarDetalle();
                },
                error: function(response) {
                    alert('Pasó algo malo: ' + response.responseText);
                }
            });
        });
    });
    
    function guardarDetalle() {
        var num_factura = $('#numero_factura').val();
        var data = num_factura + '/';
        
        $('#tabla_detalle_factura tr:gt(0)').each(function() {
            $(this).children('td').each(function() {                
                if($(this).index() !== 1 && $(this).index() !== 4) {
                    data += $(this).text() + '/';
                }                
            });
            $.ajax({
                type: 'POST',
                url: 'addDetalle/' + data,
                success: function() {
                    alert('Datos insertados');
                }
            });
            data = num_factura + '/';
        });
        window.location.href = '<?php echo $this->Html->url('/Facturas', true); ?>';
    }
    
    function clear() {
        $('#FacturasProductoProductoId').val('0');
        $('#FacturasProductoPrecio').val('');
        $('#FacturasProductoCantidad').val('');        
    }
</script>
<br><center><h3>Agregar Facturas</h3></center>
<div id="factura" >
    <div id="cabecera">
        <?php echo $this->Form->create('Factura', array('id' => 'formFactura')); ?>
            <div id="cab_izq" class="cab">
                <h3>Datos de la Factura:</3>
                    <hr>
                    Fecha: <input type="text" id="fecha" name="data[Factura][fecha]" class="input_text"/>
            </div>
            <div id="cab_der" class="cab">
                <center><h3> N° Factura</h3></center>
                <hr>
                <center><input type="text" id="numero_factura" name="data[Factura][id]" class="input_text"/></center>
                
                <input type="hidden" id="total" name="data[Factura][total]" />
                <input type="hidden" id="usuario_id" name="data[Factura][usuario_id]" value="1" />
            </div>
        <?php echo $this->Form->end(); ?>
    </div>
    <hr>
    <div id="cont_botones">
        <button id="agregar"  class="botones" type="button">Agregar producto</button>
        <button id="editar" class="botones" type="button">Editar producto</button>
        <button id="eliminar" class="botones" type="button">Eliminar producto</button>
    </div>
    <br>
        
    <div id="detalle_factura">
        <table id="tabla_detalle_factura">
            <tr>
                <td>Codigo</td>
                <td>Nombre</td>
                <td>Precio Unitario</td>
                <td>Cantidad</td>
                <td>Subtotal</td>
                <td>Edicion</td>
            </tr>             
        </table>
    </div>
    <div id="total"> 
        <h3>Total: </h3>
        <input type="text" class="input_text" readOnly id="total_visible" value="0"/>
    </div>    
</div>

<p>
    <button type="button" id="guardarFactura">Guardar</button>
</p>

<div id="dialog-form" title="Agregar producto">
    <?php
        echo $this->Form->input('FacturasProducto.producto_id', array('label' => 'Producto'));        
        echo $this->Form->input('FacturasProducto.precio', array('label' => 'Precio'));
        echo $this->Form->input('FacturasProducto.cantidad', array('label' => 'Cantidad'));
    ?>
</div>